<!DOCTYPE html>
<html class="no-js fixed-layout">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>WiFi Car</title>
  <meta name="keywords" content="index">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="static/assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="static/assets/css/admin.css">
</head>
<body >
<!--[if lte IE 9]>onload="createImageLayer();"
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

<header class="am-topbar am-topbar-inverse admin-header">
      <ul class="am-avg-sm-1 am-avg-md-1 am-text-center  ">
        <li><a href="/" style="font-size:22px;font-family: arial, verdana, sans-serif;">WIFI Car<br/></a></li>
      </ul>
</header>

<div class="am-cf admin-main">

  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
    <hr>
      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-4 am-u-md-push-8">
            <div class="am-panel am-panel-default">
              <ul id="ControlMenu" class="am-avg-sm-3 am-avg-md-3 am-margin am-padding am-text-center ">
                <li><a id="CamShot" href="#" class="am-text-success"><span class="am-icon-btn am-icon-camera-retro"></span><br/>拍一张<br/></a></li>
                <!-- class="am-icon-btn am-icon-file-text" -->
                <li><a href="#" class="am-text-warning"><span class="am-icon-btn am-icon-car"></span><br/>小车状态<br/></a></li>
                <li><a href="#" class="am-text-secondary"><span class="am-icon-btn am-icon-users"></span><br/>在线用户/3000<br/></a></li>
              </ul>
            </div>

           <div class="am-panel am-panel-default">
              <div class="am-text-center ">
                <div class="am-btn-group " data-am-button>
                  <label class="am-btn am-btn-default am-btn-md">
                    <input type="radio" name="operat_target" value="drive" checked="checked"> 小车
                  </label>
                  <label class="am-btn am-btn-default am-btn-md">
                    <input type="radio" name="operat_target" value="servo"> 摄像头
                  </label>
                </div>
              <ul class="am-avg-sm-1 am-avg-md-1 am-margin am-text-center ">
                <li><button class="" id="Up"><span class="am-icon-btn am-icon-angle-double-up"></span></button></li>
              </ul>
              <ul class="am-avg-sm-3 am-avg-md-3 am-margin am-text-center ">
                <li><button id="Left"><span class="am-icon-btn am-icon-angle-double-left"></span></button></li>
                <li><button id="Middle"><span class="am-icon-btn am-icon-circle-o-notch"></span></button></li>
                <li><button id="Right"><span class="am-icon-btn am-icon-angle-double-right"></span></button></li>
              </ul> 
              <ul class="am-avg-sm-1 am-avg-md-1 am-text-center "> 
              <li><button id="Down" ><span class="am-icon-btn am-icon-angle-double-down"></span></button></li>
              </ul>
              </div>
           </div>

        </div>

        <div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4" >
          <div class="am-panel am-panel-default">
              <div class="am-g" >
                <div id="webcam" class="am-u-md-12">
                  <img id="stream" class="am-img-circle am-img-thumbnail" src="http://192.168.3.222:35080/?action=stream" width="100%" height="100%" alt=""/>
                </div>
                <<!-- div id="webcam"  class="width:500px; height:300px;">
                  <img class="am-img-circle am-img-thumbnail" src="http://192.168.3.222:35080/?action=stream" alt=""/>
                </div>
 -->              </div>
          </div>
        </div>

      </div>

    </div>
    <!-- body end -->

    <footer class="admin-content-footer">
      <hr>
      <p id="foot" class="am-text-center">© 2016.8 苏州园区.</p>
    </footer>
  </div>
  <!-- content end -->

</div>
  <script src="static/assets/js/jquery.min.js"></script>
  <script src="static/assets/js/amazeui.min.js"></script>
  <script src="static/assets/js/app.js"></script>
  <script type="text/javascript">

    var ip_addr = document.location.hostname; 
    alert(ip_addr)
    var cam_url = "http://"+ip_addr+":35080/?action=snapshot"
    var stream_url = "http://"+ip_addr+":35080/?action=stream"
/** for cam fresh **/
/*
    var imageNr = 0; // Serial number of current image
    var finished = new Array();
    var paused = false;

    function createImageLayer() {
      var img = new Image();
      img.style.position = "absolute";
      img.style.zIndex = -1;
      img.className = "am-img-circle am-img-thumbnail";
      img.onload = imageOnload;
      img.onclick = imageOnclick;
      img.src = cam_url + "&n=" + (++imageNr);
      var webcam = document.getElementById("webcam");
      webcam.insertBefore(img, webcam.firstChild);
    }

    // Two layers are always present (except at the very beginning), to avoid flicker
    function imageOnload() {
      this.style.zIndex = imageNr; // Image finished, bring to front!
      while (1 < finished.length) {
        var del = finished.shift(); // Delete old image(s) from document
        del.parentNode.removeChild(del);
      }
      finished.push(this);
      if (!paused) createImageLayer();
    }

    function imageOnclick() { // Clicking on the image will pause the stream
      paused = !paused;
      if (!paused) createImageLayer();
    }
*/

/** end for cam fresh **/

/** device control **/
  var device;
  device = jQuery("input[name='operat_target']:checked").val();
  jQuery("[name='operat_target']").on("change",
    function (option) {
      device = jQuery(option.target).val();
    }
  ); 

    var data = {
        "iotLanId": "LANdseert56fg4sf9h2sc4H",
        "targetDeviceMode": "DMdsdf11deswefjbgtdi08",
        "iotServiceRequestLable": "ISR0dAagnaleop783gsdfgh1dfAdfdfxg",
        "requestParam":""
    }

  function assamble_msg(device_name, method, data_tile, value){
    var msg_template;
    var msg_template_head;
    var msg_template_data;
    var dst_uri = "";

    msg_template_head = {
        "device": device_name,
        "method": method,
//        "uuid"  device_uuid:       
    };
    msg_template_data = {
        "title": data_tile,
        "value": value,
    };

    if (device_name == "drive")
    {
      dst_uri = "ipc:///tmp/drive.ipc";
    }
    else if (device_name == "servo")
    {
      dst_uri = "ipc:///tmp/servo.ipc";
    }

    msg_template = {
        "head"  : {
          "src" : "ipc:///tmp/web.ipc",
          "dst" : dst_uri,
          "mode" : "request",
          "device": device_name,
          "method": method,
        },
        "data"  : {
          "title": data_tile,
          "value": value,
          "token": "",
        },
    };

    data["requestParam"] = msg_template
    return JSON.stringify(data);
  }
/*
  function send_web_msg(event){
    var msg;
    
    msg = assamble_msg(event.data.device, event.data.operat, "once");

    jQuery.post(event.data.yrl, msg, event.data.callback, 'json');
  }

  var event_data_temp = {
      "url": ,
      "device": ,
      "operat": ,
      "timeout": ,
      "callback": ,
  };

  // var up;
  jQuery("#Up").bind("mousedown", {
      url: "/move",
      device: device,
      operat: 
    }, send_web_msg);
*/

  jQuery("#Up").bind("mousedown", function(e){
    // clearInterval(keep_forward);
      var msg;
      if ("drive" == device){
        msg = assamble_msg(device, "move_forward");
      }else if ("servo" == device){
        msg = assamble_msg(device, "turn_up");
      }

      $.ajax({
          type: "POST",
          url: "/move",
          dataType: 'json',
          contentType: "application/json; charset=utf-8",

          data: msg,

          success:function(message){
            //alert(message);
          },
          error:function(message){
            //alert(message);
          },
      });      
  });

  jQuery("#Up").bind("mouseup", function(e){
    // clearInterval(keep_forward);
    setTimeout(function(){
      var msg;
      if ("drive" == device){
        msg = assamble_msg(device, "move_stop");
      }else if ("servo" == device){
        msg = assamble_msg(device, "turn_stop");
      }

      jQuery.post("/move", msg, function(data, status){
        // alert(data + ' '+ status);
      }, 'json');        
    }, 300);

  });

  //down
  jQuery("#Down").bind("mousedown", function(){
    var msg;
    if ("drive" == device){
        msg = assamble_msg(device, "move_backward");
    }else if ("servo" == device){
        msg = assamble_msg(device, "turn_down");
    }

    jQuery.post("/move", msg, function(data, status){
      // alert(data + ' '+ status);
    });
  });

  jQuery("#Down").bind("mouseup", function(){
    setTimeout(function(){
      var msg;
      if ("drive" == device){
        msg = assamble_msg(device, "move_stop");
      }else if ("servo" == device){
        msg = assamble_msg(device, "turn_stop");
      }

      jQuery.post("/move", msg, function(data, status){
        // alert(data + ' '+ status);
      });          
    }, 300);

  });

  //middle
  jQuery("#Middle").bind("mousedown", function(){
    var msg;
    if ("drive" == device){
        msg = assamble_msg(device, "move_stop");
    }else if ("servo" == device){
        msg = assamble_msg(device, "turn_stop");
    }

    jQuery.post("/move", msg, function(data, status){
      // alert(data + ' '+ status);
    });
  });
  //middle
  jQuery("#Middle").bind("mouseup", function(){
    var msg;
    if ("drive" == device){
      return;
    }

    setTimeout(function(){
        msg = assamble_msg(device, "turn_stop");

        jQuery.post("/move", msg, function(data, status){
      });
    }, 300);

  });

  //left
  jQuery("#Left").bind("mousedown", function(){
    var msg;
    if ("drive" == device){
        msg = assamble_msg(device, "move_left_bycenter");
    }else if ("servo" == device){
        msg = assamble_msg(device, "turn_left");
    }

    jQuery.post("/move", msg, function(data, status){
      // alert(data + ' '+ status);
    });
  });

  jQuery("#Left").bind("mouseup", function(){
    setTimeout(function(){
      var msg;
      if ("drive" == device){
        msg = assamble_msg(device, "move_stop");
      }else if ("servo" == device){
        msg = assamble_msg(device, "turn_stop");
      }

      jQuery.post("/move", msg, function(data, status){
        // alert(data + ' '+ status);
      });          
    }, 300);
  });

  //right
  jQuery("#Right").bind("mousedown", function(){
    var msg;
    if ("drive" == device){
        msg = assamble_msg(device, "move_right_bycenter");
    }else if ("servo" == device){
        msg = assamble_msg(device, "turn_right");
    }

    jQuery.post("/move", msg, function(data, status){
      // alert(data + ' '+ status);
    });
  });

  jQuery("#Right").bind("mouseup", function(){
    setTimeout(function(){
      var msg;
      if ("drive" == device){
        msg = assamble_msg(device, "move_stop");
      }else if ("servo" == device){
        msg = assamble_msg(device, "turn_stop");
      }

      jQuery.post("/move", msg, function(data, status){
        // alert(data + ' '+ status);
      });       
    }, 300);
   
  });


/** end move control **/

      jQuery(function () {
        var now = new Date();

        var sys_date = now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate();
        var sys_time = now.getHours()+":"+now.getMinutes();  

        $("#stream").attr("src", stream_url)
      });

    </script>  

</body>
</html>